<template>
    <div class='confirmPay'>
        <el-dialog title="手动确认收款" visible @close="$emit('close')" width="1200px" append-to-body
            :close-on-click-modal="false">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" v-loading="formLoading">
                <el-col :span="24">
                    <el-form-item label="支付凭证" prop="confirm_pay_image">
                        <el-upload class="avatar-uploader" :action="$uploadUrl"
                            :show-file-list="false" :on-success="handleAvatarSuccess">
                            <img v-if="form.confirm_pay_image" :src="form.confirm_pay_image" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="确认支付说明" prop="confirm_pay_remark">
                        <el-input v-model="form.confirm_pay_remark" type="textarea" rows="4" placeholder="请输入确认支付说明"></el-input>
                    </el-form-item>
                </el-col>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close()">取 消</el-button>
                <el-button type="primary" @click="submit" :disabled="formLoading">确 定</el-button>
            </span>
            <!-- <pagination v-show="pageCount > 0" :pageCount="pageCount" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" /> -->
        </el-dialog>
    </div>
</template>
<script>
import throttle from 'lodash.throttle'
import { confirmMoviePay } from "@/api/movieOrder/movieOrder.js"
export default {
    name: 'confirmPay',
    props: {
        orderNo: {
            type: String,
        }

    },
    components: {

    },
    data() {
        return {
            loading: false,
            formLoading: false,
            form: {
                out_trade_no: this.orderNo,
                confirm_pay_image: '',
                confirm_pay_remark: '',
            },
            rules: {
                confirm_pay_image: [{ required: true, message: '请上传支付凭证', trigger: 'blur' }],
                confirm_pay_remark: [{ required: true, message: '请输入确认支付说明', trigger: 'blur' }],
            },

        }
    },
    created() {

    },
    methods: {
        close() {
            this.$emit('close');
        },
        handleAvatarSuccess(res, file) {
            this.$set(this.form, 'confirm_pay_image', res.data[0].fileurl)
        },
        submit: throttle(function () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.formLoading = true;
                    confirmMoviePay(this.form).then(res => {
                        this.msgSuccess("操作成功！");
                        this.close()
                        this.formLoading = false;
                        this.$emit('load')
                    }).catch(() => {
                        this.formLoading = false;
                    })
                }
            })
        }, 1000, { trailing: false })
    },
}

</script>
<style scoped lang='scss'>
/deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100px !important;
    height: 100px !important;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px !important;
    height: 100px !important;
    line-height: 100px !important;
    /* text-align: center;
    display: block !important; */
}

.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>